<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制后台</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache,no-store,must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../component/pear/css/pear-notable.css" />
		<link rel="stylesheet" href="../../admin/css/other/console1.css" />
		<style>
			.dtree-scroll{
				/* height: calc(100vh - 5px)!important; */
				/* height: 100vh!important; */
				height: 400px!important;
				text-align: left;
				overflow: auto;
			}
			.select-date-wrapper{
				height: 100%!important;
			}
			.layui-table-body .layui-none{
				padding: 10px 15px;
			}
		</style>
	</head>
	<body class="pear-container">
		<div>
			<div class="layui-row layui-col-space10">
				<div class="layui-col-xs3">
					<div class="layui-card top-panel">
						<div class="layui-card-header">选择机台</div>
						<div class="layui-card-body dtree-scroll" id="dtree-scroll-wrapper">
							<ul id="demoTree" class="dtree" data-id="0"></ul>
						</div>
					</div>
				</div>

				<div class="layui-col-xs9">
					<!-- 日期选择 -->
					<div class="layui-row layui-col-space10">
						<div class="layui-col-xs12">
							<div class="layui-card top-panel">
								<div class="layui-card-body select-date-wrapper">
									<label class="layui-form-label" style="text-align: center;">选择日期</label>
									<div class="layui-input-block">
										<input id="selectDate" class="layui-input" type="text" autocomplete="off" placeholder="选择日期范围">
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 数据结果 -->
					<div class="layui-row layui-col-space10">
						<div class="layui-col-xs12">
							<div class="layui-card top-panel">
								<div class="layui-card-header">日产量</div>
								<div class="layui-card-body" style="height: 100%!important;">
									<table id="shift-capa-record-table" lay-filter="shift-capa-record-table"></table>
								</div>
							</div>
						</div>
					</div>
					<!-- 1值时间记录 -->
					<div class="layui-row layui-col-space10">
						<div class="layui-col-xs12">
							<div class="layui-card top-panel">
								<div class="layui-card-header">1值时间记录</div>
								<div class="layui-card-body" style="height: 100%!important;">
									
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">8时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0108" lay-filter="time-record-0108"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">9时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0109" lay-filter="time-record-0109"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">10时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0110" lay-filter="time-record-0110"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">11时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0111" lay-filter="time-record-0111"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">12时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0112" lay-filter="time-record-0112"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">13时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0113" lay-filter="time-record-0113"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">14时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0114" lay-filter="time-record-0114"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">15时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0115" lay-filter="time-record-0115"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">16时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0116" lay-filter="time-record-0116"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">17时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0117" lay-filter="time-record-0117"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">18时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0118" lay-filter="time-record-0118"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">19时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0119" lay-filter="time-record-0119"></table>
										</div>
									</fieldset>
									
								</div>
								
							</div>
						</div>
					</div>

					<!-- 2值时间记录 -->
					<div class="layui-row layui-col-space10">
						<div class="layui-col-xs12">
							<div class="layui-card top-panel">
								<div class="layui-card-header">2值时间记录</div>
								<div class="layui-card-body" style="height: 100%!important;">
									
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">20时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0220" lay-filter="time-record-0220"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">21时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0221" lay-filter="time-record-0221"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">22时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0222" lay-filter="time-record-0222"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">23时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0223" lay-filter="time-record-0223"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">次日0时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0200" lay-filter="time-record-0200"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">次日1时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0201" lay-filter="time-record-0201"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">次日2时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0202" lay-filter="time-record-0202"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">次日3时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0203" lay-filter="time-record-0203"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">次日4时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0204" lay-filter="time-record-0204"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">次日5时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0205" lay-filter="time-record-0205"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">次日6时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0206" lay-filter="time-record-0206"></table>
										</div>
									</fieldset>
									<fieldset class="layui-elem-field" style="text-align: left;">
										<legend style="font-size:14px">次日7时</legend>
										<div class="layui-field-box" style="padding: 0 15px;">
											<table id="time-record-0207" lay-filter="time-record-0207"></table>
										</div>
									</fieldset>
									
								</div>
								
							</div>
						</div>
					</div>
					
					
					<!-- end -->
				</div>
			</div>
		</div>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script src="../../lay-ext/dayjs.min.js"></script>
		
		<script>
			// 加载自定义模块,检查浏览器和token
			layui.extend({
        myheader: "{/}/lay-ext/myheader",
      });
			layui.use(['layer', 'echarts', 'element', 'count','dtree','myheader','popup','laydate','table'], function() {
				var $ = layui.jquery,
					layer = layui.layer,
					element = layui.element,
					count = layui.count,
					echarts = layui.echarts,
					dtree=layui.dtree,
					myheader=layui.myheader,
					popup=layui.popup, 
					laydate=layui.laydate,
					table=layui.table;

				//检查token
				myheader.checkToken()

				// 定义常量
				const baseUrl = myheader.baseUrl();

				// 定义默认值
				// 默认日期为今天
				var selectedDate= dayjs().format("YYYY-MM-DD")
				var selectedMachineNo =""

				// 渲染并获树的实例
				const demoTree = dtree.render({
					elem: "#demoTree",
					initLevel: "1",
					width:"100%",
					scroll:"#dtree-scroll-wrapper",
					method: 'get',
					headers: {
						//请求头
						satoken: layui.sessionData("mytoken").tokenValue,
					},
					url: baseUrl+"/machineOgztionDTree/findAll?_t="+new Date().getTime(),
				});
				
				//dtree事件 node(节点)
				dtree.on("node('demoTree')",function(obj){
					if(!obj.param.leaf){
						demoTree.clickSpread(obj.dom);  //调用内置函数展开节点
					} else {
						// popup.success(JSON.stringify(obj.param))
						selectedMachineNo=obj.param.context
						renderResult(selectedMachineNo,selectedDate)
					}
				})
			
				laydate.render({
					elem: '#selectDate' //指定元素
					,value: selectedDate
					,done:function(value){
						selectedDate=value
						renderResult(selectedMachineNo,selectedDate)
					}
				});

				const shiftCapaRecordCols=[
					[
						{
							title:'值'
							// ,field:'recordTime'
							,templet:function(d){
								if(dayjs(d.recordTimeDT).format('YYYY-MM-DD HH:mm:ss').includes("20:00:00")) {
									return "1值"
								}
								if(dayjs(d.recordTimeDT).format('YYYY-MM-DD HH:mm:ss').includes("08:00:00")) {
									return "2值"
								}
								return "error"
							},
							align:'left',
							// totalRowText: '合计：'
						},
						{ 
							title:'计划产量'
							,field:'planOutput'
							// ,totalRow:'{{= parseInt(d.TOTAL_NUMS) }}',align:'left'
							,templet:function(d){
								return d.planOutput +' kpsc'
							}
						},
						{
							title:'实际产量'
							,field:'actualOutput'
							,templet:function(d){
								if(parseFloat(d.planOutput)>parseFloat(d.actualOutput)){
									return '<span style="color:#bf242a">'+d.actualOutput+' kpcs</span>'
								}
								return parseFloat(d.actualOutput)+' kpcs'
							}
							,align:'left'
							// ,totalRow:'{{= parseInt(d.TOTAL_NUMS) }}'
						},
						{ 
							title: '不良数'
							, field:'defect'
							// ,totalRow:'{{= parseInt(d.TOTAL_NUMS) }}'
							,align:'left'
							,templet:function(d){
								console.log(d);
								return d.defect+' pcs'
							}
						},
						{ title: '备注', field:'recordRemark'},
						{
							title: '作业者'
							,field: 'userFullName'
						}
					]
				]

				// const shiftCapaRecordDefaultData=[
				// 	{
				// 		recordTime: new Date(dayjs().format('YYYY-MM-DD')+" 08:00:00").getTime(),
				// 		planOutput: 0,
				// 		actualOutput: 0,
				// 		defect:0,
				// 		recordRemark:''
				// 	},
				// 	{
				// 		recordTime: new Date(dayjs().format('YYYY-MM-DD')+" 20:00:00").getTime(),
				// 		planOutput: 0,
				// 		actualOutput: 0,
				// 		defect:0,
				// 		recordRemark:''
				// 	}
				// ]

				const timeRecordCols=[
					[
						{
							title:'时间'
							,field:'recordTimeDT'
							,templet:function(d){
								return dayjs(d.recordTimeDT).format('HH:mm:ss')
							}
							// ,width:100
						},
						{title:'类型',field:'recordType'},
						{title:'名称',field:'recordName'},
						{title:'结果',field:'recordResult'},
						{title:'LotNo',field:'recordLotInfo'}
					]
				]

				// // 渲染表格
				// table.render({
				// 	elem:"#shift-capa-record-table",
				// 	cols:shiftCapaRecordCols,
				// 	data: shiftCapaRecordDefaultData,
				// 	// skin: "line",
				// 	lineStyle:"height:auto",
				// 	// 分页
				// 	page:false,
				// 	// 合计行
				// 	totalRow:true
				// })

				function renderResult(selectedMachineNo,selectedDate){
					renderCapaTable(selectedMachineNo,selectedDate)
					renderTimeRecord(selectedMachineNo,selectedDate)
				}

				function renderCapaTable(selectedMachineNo,selectedDate){
					table.render({
						elem:"#shift-capa-record-table",
						cols:shiftCapaRecordCols,
						url: baseUrl + "/shiftcaparecord/getDailyData",
						where: {
							machineNo: selectedMachineNo,
							dailyStart: dayjs(new Date(selectedDate+' 08:00:00')).format('YYYY-MM-DD HH:mm:ss'),
							dailyEnd:dayjs(new Date(selectedDate+' 08:00:00')).add(1,'day').format('YYYY-MM-DD HH:mm:ss')
						},
						headers: {
							//请求头
							satoken: layui.sessionData("mytoken").tokenValue,
						},
						response: {
							// 重新设定返回的数据格式
							statusCode: 200, //默认返回 code:0 为返回成功,改成200
							countName: "total", //默认数组总量字段是count,改成total
						},
						// skin: "line",
						lineStyle:"height:auto",
						// 分页
						page:false,
						// 合计行
						// totalRow:true
					})
					table.resize('shift-capa-record-table')

				}
			
				function renderTimeRecord(selectedMachineNo,selectedDate){
					let beginTimestamp
					let endTimestamp
					beginTimestamp=new Date(selectedDate+' 08:00:00')
					endTimestamp=new Date(selectedDate+' 09:00:00')
					renderTimeTable('time-record-0108',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 09:00:00')
					endTimestamp=new Date(selectedDate+' 10:00:00')
					renderTimeTable('time-record-0109',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 10:00:00')
					endTimestamp=new Date(selectedDate+' 11:00:00')
					renderTimeTable('time-record-0110',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 11:00:00')
					endTimestamp=new Date(selectedDate+' 12:00:00')
					renderTimeTable('time-record-0111',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 12:00:00')
					endTimestamp=new Date(selectedDate+' 13:00:00')
					renderTimeTable('time-record-0112',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 13:00:00')
					endTimestamp=new Date(selectedDate+' 14:00:00')
					renderTimeTable('time-record-0113',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 14:00:00')
					endTimestamp=new Date(selectedDate+' 15:00:00')
					renderTimeTable('time-record-0114',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 15:00:00')
					endTimestamp=new Date(selectedDate+' 16:00:00')
					renderTimeTable('time-record-0115',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 16:00:00')
					endTimestamp=new Date(selectedDate+' 17:00:00')
					renderTimeTable('time-record-0116',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 17:00:00')
					endTimestamp=new Date(selectedDate+' 18:00:00')
					renderTimeTable('time-record-0117',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 18:00:00')
					endTimestamp=new Date(selectedDate+' 19:00:00')
					renderTimeTable('time-record-0118',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 19:00:00')
					endTimestamp=new Date(selectedDate+' 20:00:00')
					renderTimeTable('time-record-0119',selectedMachineNo,beginTimestamp,endTimestamp)	
					// 2值
					beginTimestamp=new Date(selectedDate+' 20:00:00')
					endTimestamp=new Date(selectedDate+' 21:00:00')
					renderTimeTable('time-record-0220',selectedMachineNo,beginTimestamp,endTimestamp)	
				
					beginTimestamp=new Date(selectedDate+' 21:00:00')
					endTimestamp=new Date(selectedDate+' 22:00:00')
					renderTimeTable('time-record-0221',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(selectedDate+' 22:00:00')
					endTimestamp=new Date(selectedDate+' 23:00:00')
					renderTimeTable('time-record-0222',selectedMachineNo,beginTimestamp,endTimestamp)
					
					beginTimestamp=new Date(selectedDate+' 23:00:00')
					endTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 00:00:00')
					renderTimeTable('time-record-0223',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 00:00:00')
					endTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 01:00:00')
					renderTimeTable('time-record-0200',selectedMachineNo,beginTimestamp,endTimestamp)
					
					beginTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 01:00:00')
					endTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 02:00:00')
					renderTimeTable('time-record-0201',selectedMachineNo,beginTimestamp,endTimestamp)	

					beginTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 02:00:00')
					endTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 03:00:00')
					renderTimeTable('time-record-0202',selectedMachineNo,beginTimestamp,endTimestamp)
					
					beginTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 03:00:00')
					endTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 04:00:00')
					renderTimeTable('time-record-0203',selectedMachineNo,beginTimestamp,endTimestamp)

					beginTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 04:00:00')
					endTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 05:00:00')
					renderTimeTable('time-record-0204',selectedMachineNo,beginTimestamp,endTimestamp)

					beginTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 05:00:00')
					endTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 06:00:00')
					renderTimeTable('time-record-0205',selectedMachineNo,beginTimestamp,endTimestamp)

					beginTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 06:00:00')
					endTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 07:00:00')
					renderTimeTable('time-record-0206',selectedMachineNo,beginTimestamp,endTimestamp)

					beginTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 07:00:00')
					endTimestamp=new Date(dayjs(selectedDate).add(1,'day').format('YYYY-MM-DD')+' 08:00:00')
					renderTimeTable('time-record-0207',selectedMachineNo,beginTimestamp,endTimestamp)
				}

				function renderTimeTable(elemid,selectedMachineNo,beginTimestamp,endTimestamp){
					table.render({
						elem: '#'+elemid,
						cols:timeRecordCols,
						url: baseUrl + "/record/getDailyData",
						where: {
							machineNo: selectedMachineNo,
							dailyStart: dayjs(beginTimestamp).format('YYYY-MM-DD HH:mm:ss'),
							dailyEnd:dayjs(endTimestamp).format('YYYY-MM-DD HH:mm:ss')
						},
						headers: {
							//请求头
							satoken: layui.sessionData("mytoken").tokenValue,
						},
						response: {
							// 重新设定返回的数据格式
							statusCode: 200, //默认返回 code:0 为返回成功,改成200
							countName: "total", //默认数组总量字段是count,改成total
						},
						// skin: "row",
						lineStyle:"height:auto",
						// 分页
						page:false,
					})
					table.resize(elemid)
				}

				
			});
		</script>
	</body>
</html>
